<template>
  <div>
    <el-dialog title="新增原因" class="noselect"
               v-dialogdrag=" { target:'.el-dialog__header',container:'.el-dialog',border:'.el-dialog__wrapper'}"
               :close-on-click-modal="false" :visible.sync="showDialog" :before-close="handleClose">
      <div style="margin: 20px;"></div>
      <el-form :model="modelForm" ref="modelForm" label-width="100px" class="demo-ruleForm" v-if="isSave">
        <el-row>
          <el-col :span="24">
            <el-form-item label=" " :prop="i.name" :rules="[{ required: true, message: '请输入备注名称', trigger: 'blur' }]" v-for="(i,index) in names" :key="index">
              <el-input placeholder="请输入备注名称" v-model="i.name" auto-complete="off" :maxlength="25" size="medium"  class="w-100p">
                <template slot="prepend">
                  <el-tooltip placement="top" content="备注名称，不可重复">
                    <el-button tabIndex="-1">备注名称</el-button>
                  </el-tooltip>
                </template>
                <template slot="append">
                  <el-tooltip placement="top" >
                    <el-button tabIndex="-1" @click="addColumn" v-if="index==0">新增</el-button>
                    <el-button tabIndex="-1" @click="delColumn(index)" v-if="index!=0"><i class="el-icon-close"></i></el-button>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <el-form :model="modelForm" ref="modelForm" label-width="100px" class="demo-ruleForm" v-if="!isSave">
        <el-row>
          <el-col :span="24">
            <el-form-item label=" " :prop="name" :rules="[{ required: true, message: '请输入备注名称', trigger: 'blur' }]" >
              <el-input placeholder="请输入备注名称" v-model="modelForm.name" auto-complete="off" :maxlength="25" size="medium"  class="w-100p">
                <template slot="prepend">
                  <el-tooltip placement="top" content="备注名称，不可重复">
                    <el-button tabIndex="-1">备注名称</el-button>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div class="foot-bar-button">
        <el-button type="primary" @click="submitForm('modelForm')" size="medium">提交</el-button>
        <el-button @click="resetForm('modelForm')" size="medium">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  //注意路径
  export default {
    props: ["isShow", "id"], //参数
    data() {
      return {
        modelForm: {},
        showDialog: false,
        activityId: "",
        isSave: true,
        downCategeryId: [],
        isUpdate: false,
        treeData: [],
        names:[{name:""}]
      };
    },
    watch: {
      isShow: function(newValue, oldValue) {
        this.showDialog = newValue;
        if (newValue) {
          if (this.id != "") {
            this.activityId = this.id;
            this.isSave = false;
            this.isUpdate = true;

            this.$axios
              .get("auxiliary/comments/" + this.activityId + "/update")
              .then(data => {
                this.modelForm = data.content.comment;
              });
          } else {
            this.isSave = true;
            this.isUpdate = false;
            this.$axios.get("auxiliary/comments/create").then(data => {
              this.modelForm = data.content.comment;
            });
          }
        }
      }
    },
    created() {
      window.this = this;
    },
    methods: {
      addColumn(){
        this.names.push({name:"",id:""})
      },
      delColumn(index){
        if(this.names.length>1){
          this.names.splice(index,1);
        }else{
          this.$message.info("最少保留一条");
        }
      },
      goBack() {
        this.router.go(-1);
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {

            var data={};
            data.type='ZENGCAI';
            var names=[];
            for(var i=0;i<this.names.length;i++){
              names.push(this.names[i].name);
            }
            console.log(this.names);
            data.names=names;
            if (this.isSave) {
              this.$axios
                .post("auxiliary/comments/create",data,"json")
                .then(data => {
                  if (data.status == 200) {
                    this.$message({
                      message: data.message,
                      type: "success"
                    });
                    this.$emit("addSuccess");
                  } else {
                    this.$message.error(data.message);
                  }
                });
            } else {
              this.modelForm._method = "PUT";
              this.$axios
                .put(
                  "auxiliary/comments/" + this.activityId + "/update",
                  this.modelForm
                )
                .then(data => {
                  if (data.status == 200) {
                    this.$message({
                      message: data.message,
                      type: "success"
                    });
                    this.$emit("addSuccess");
                  } else {
                    this.$message.error(data.message);
                  }
                });
            }
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$emit("close");
        this.showDialog = false;
      },
      handleClose(done) {
        this.$emit("close");
        done();
      },
    }
  };
</script>
<style scoped>
</style>
